<template>
  <div style="width: 100%;">
    <MainTitle>
      <template slot="mainTitle">
        <slot name="mainTitle"></slot>
      </template>
      <template slot="mainInfo">
        <slot name="mainInfo"></slot>
      </template>
    </MainTitle>
    <div class="wrapper">
      <div class="content">
        <h2><slot name="content-title">您身边的网络运营服务管家</slot></h2>
        <p style="text-align: center;">
          <slot name="content">
            鑫灵技集数据IDC、软件开发、网站建设开发、微信小程序开发、APP移动开发、电子商务平台运营、中英文数字化营销（SEO\SEM）、互联网教育服务于一体的综合性网络服务提供商。将前端的技术研究转化为更好的网络产品与专业的服务，力求为客户提供一站式的全方位互联网解决方案。
          </slot>
        </p>
      </div>
      <div class="gongge">
        <div class="box">
          <ul>
            <li>
              <div class="num plus counter" data-target="2000">{{ num }}</div>
              <div class="text">超过{{ num }}次服务经验</div>
            </li>
            <li>
              <div class="num plus counter" data-target="10">{{ num1 }}</div>
              <div class="text">{{ num1 }}年专业历程</div>
            </li>
            <li>
              <div class="num hours counter" data-target="24">{{ num2 }}</div>
              <div class="text">{{ num2 }}小时服务保障</div>
            </li>
          </ul>
        </div>
      </div>
      <div v-if="footer" class="atTheBottomOfThe">
        <slot name="footer"
          ><md-button class="md-round" href="#/XinLing"
            >了解更多</md-button
          ></slot
        >
      </div>
    </div>
  </div>
</template>

<script>
import MainTitle from "../components/MainTitle";
export default {
  components: { MainTitle },
  props: {
    footer: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      num: 0,
      num1: 0,
      num2: 0
    };
  },

  mounted() {
    let timer = setInterval(() => {
      let increment = parseInt(2000 / 10);
      let increment1 = parseInt(10 / 10);
      let increment2 = parseInt(24 / 10);
      this.num += increment;
      this.num1 += increment1;
      this.num2 += increment2;
      if (this.num >= 2000) {
        clearInterval(timer);
        this.num = 2000;
        this.num1 = 10;
        this.num2 = 24;
      }
    }, 200);
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.wrapper {
  margin-top: -2.1rem;
  // border-bottom: #949494 0.1rem solid;
  width: 100%;

  .content {
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    flex-direction: column;
    align-items: center;
    h2 {
      font-weight: 400;
      font-size: 2rem;
      letter-spacing: 0.1em;
    }
    p {
      width: 35rem;
      margin-top: -0.5rem;
      color: #444;
      font-size: 0.9rem;
      font-weight: 400;
    }

    @media all and (max-width: 991px) {
      h2 {
        font-weight: 400;
        font-size: 1.5rem;
      }
      p {
        width: 90%;
        font-size: 0.99rem;
      }
    }
  }

  .gongge {
    text-align: center;
    .box {
      ul {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        li {
          list-style: none;
          margin: 0 3rem;
          .num {
            font-family: "DIN Condensed Bold";
            font-size: 3rem;
            font-weight: 500;
          }
          .plus::after {
            content: "+";
          }
          .hours::after {
            content: "h";
          }
          .text {
            margin-top: 1rem;
          }
        }
      }
    }
    @media all and (max-width: 991px) {
      li {
        margin: 0 1rem !important;
      }
      .num {
        font-family: "DIN Condensed Bold";
        font-size: 3rem !important;
      }
      .text {
        font-size: 1rem;
      }
    }
  }

  .atTheBottomOfThe {
    text-align: center;
    margin-bottom: 2rem;
  }
}
</style>
